<template>
  <div class="skill">
    <Tilte title="技能掌握" :show="show"></Tilte>
    <div class="content">
      <div class="skill-yuan">
        <ul class="great-yuan">
          <li
            v-for="(great, index) in greats"
            :key="great"
            :style="{backgroundColor: bgColor1[index]}"
            class="great-item"
          >{{ great }}</li>
        </ul>
        <ul class="small-yuan">
          <li
            v-for="(small, index) in smalls"
            :key="small"
            :style="{backgroundColor: bgColor2[index]}"
            class="small-item"
          >{{ small }}</li>
        </ul>
      </div>
      <div class="des">
        <p
          v-for="(item, index) in desc"
          :key="item"
        >{{ ++index + '、' + item }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Tilte from '../title/title'

import { mapState } from 'vuex'

export default {
  name: 'skill',
  data () {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['greats', 'smalls', 'desc', 'bgColor1', 'bgColor2'])
  },
  components: {
    Tilte
  }
}
</script>

<style lang="less" scoped>
.skill {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 50px 0 30px;
  box-sizing: border-box;
  position: relative;
  .content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    color: #212529;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .skill-yuan {
      position: relative;
      .animation(@type1,@duration1,@type2,@duration2) {
        animation: @type1 8s cubic-bezier(0.36, 0, 0.64, 1) @duration1 infinite alternate, @type2 8s cubic-bezier(0.36, 0, 0.64, 1) @duration2 infinite alternate;
        @keyframes outX {
          0% {
            left: calc(-3.125rem / 2);
          }

          100% {
            left: calc(16rem - (3.125rem / 2));
          }
        }

        @keyframes outY {
          0% {
            top: calc(-3.125rem / 2);
          }

          100% {
            top: calc(16rem - (3.125rem / 2));
          }
        }

        @keyframes innerX {
          0% {
            left: calc(-2.5rem / 2);
          }

          100% {
            left: calc(9rem - (2.5rem / 2));
          }
        }

        @keyframes innerY {
          0% {
            top: calc(9rem - (2.5rem / 2));
          }

          100% {
            top: calc(-2.5rem / 2);
          }
        }
      }
      .great-yuan {
        width: 16rem;
        height: 16rem;
        border-radius: 50%;
        border: 2px dashed #999;
        position: relative;
        .great-item {
          position: absolute;
          width: 3.125rem;
          height: 3.125rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          &:nth-child(1) {
            .animation(outX, -4s, outY, 0s);
          }
          &:nth-child(2) {
            .animation(outX, -6s, outY, -2s);
          }
          &:nth-child(3) {
            .animation(outX, -8s, outY, -4s);
          }
          &:nth-child(4) {
            .animation(outX, -10s, outY, -6s);
          }
          &:nth-child(5) {
            .animation(outX, -12s, outY, -8s);
          }
          &:nth-child(6) {
            .animation(outX, -14s, outY, -10s);
          }
          &:nth-child(7) {
            .animation(outX, -16s, outY, -12s);
          }
          &:nth-child(8) {
            .animation(outX, -18s, outY, -14s);
          }
        }
      }
      .small-yuan {
        width: 9rem;
        height: 9rem;
        border-radius: 50%;
        border: 2px dashed #999;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        .small-item {
          position: absolute;
          width: 2.5rem;
          height: 2.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          &:nth-child(1) {
            .animation(innerX, -4s, innerY, 0s);
          }
          &:nth-child(2) {
            .animation(innerX, -10s, innerY, -6s);
          }
          &:nth-child(3) {
            .animation(innerX, -14s, innerY, -10s);
          }
        }
      }
    }
    .des {
      margin-left: 100px;
      padding: 0 20px;
      p {
        font-size: .9rem;
        line-height: 24px;
        padding: 5px 0;
      }
    }
  }
}
@media screen and (max-width: 961px) {
  .content {
    position: static !important;
    .des {
      margin-top: 50px !important;
    }
  }
}
@media screen and (max-width: 600px) {
  .skill {
    height: auto;
    .content {
      position: static !important;
      .des {
        margin-left: 0px !important;
        margin-top: 50px !important;
      }
    }
  }
}
</style>
